<template>
  <div>
    <merchantHeader/>
    <div class="backorg">
      <div class="longe"></div>
      <div class="con_aon">
        <div class="ta_list">
          <div class="top">
            <div class="ta">今天你分享了吗？</div>
          
              <template>
                <div id="app">
                  <div class="demo">
                    <div-editor
                      :min-height="100"
                      :max-height="300"
                      :placeholder="placeholder"
                      v-model="userInput"
                      class="publish-box"
                      @sendMessage="sendMessage"
                      >
                     
                    </div-editor>
                    <hr>
                    <h2>发送消息展示</h2>
                    <p ref="message"></p>
                  </div>
                </div>
              </template>

            
          </div>
          <div class="nva">
            <ul>
              <li 
              v-for="(item,index) in name" 
              @click="checkItem(index)" 
              :key="index" 
              :class="{active:index==isActive}" 
              >{{item}}</li>            
            </ul>
            <div>
              <input type="text" placeholder="搜索你感兴趣的内容">
              <div><img src="@/assets/img/c1.png" alt=""></div>
            </div>
          </div>
          <div class="conmen">
            <div class="list">
              <div class="afafaafafaf">
                <div class="d_ofne_e box">
                <div class="topen_e"><img src="@/assets/img/aa.png" alt=""></div>
                <div class="tat_aa_e">
                  <span>Lua嘟嘟</span>
                  <span class="sj">5200.15.01</span>
                </div>
                
                </div>
                <div class="opt">+关注</div>
              </div>
              
              <div class="ado_oo">
                <p>
                  【没钱了！#世界最大印钞厂发出破产警告#：有198年历史，为英国等140个国家印制钞票】据
                  RT12月8日报道，为英国等140个国家印制钞票的德拉鲁公司发出可能破产的警告。德拉鲁公司
                  是一家英国纸币制造商，从1860年起就为英国央行印制钞票，也是世界最大的印钞厂，印制世
                  界上约1/3的钞票。如果德拉鲁公司无 ​​​​...展开全文 
                </p>
              </div>
              <like/>
            </div>
            <div class="list">
              <div class="d_ofne_e box">
                <div class="topen_e"><img src="@/assets/img/aa.png" alt=""></div>
                <div class="tat_aa_e">
                  <span>Lua嘟嘟</span>
                  <span class="sj">5200.15.01</span>
                </div>
              </div>
              <div class="ado_oo">
                <span>
                  #好心情好运气#   
                </span>
                <div class="is_ing">
                  <img src="@/assets/img/aa.png" alt="">
                  <img src="@/assets/img/aa.png" alt="">
                  <img src="@/assets/img/aa.png" alt="">
                  <img src="@/assets/img/aa.png" alt="">
                  <img src="@/assets/img/aa.png" alt="">
                  <p></p>
                </div>
              </div>
            </div>
            <div class="list">
              <div class="d_ofne_e box">
                <div class="topen_e"><img src="@/assets/img/aa.png" alt=""></div>
                <div class="tat_aa_e">
                  <span>Lua嘟嘟</span>
                  <span class="sj">5200.15.01</span>
                </div>
              </div>
              <div class="ado_oo">
                <p>
                  【没钱了！#世界最大印钞厂发出破产警告#：有198年历史，为英国等140个国家印制钞票】据
                RT12月8日报道，为英国等140个国家印制钞票的德拉鲁公司发出可能破产的警告。德拉鲁公司
                是一家英国纸币制造商，从1860年起就为英国央行印制钞票，也是世界最大的印钞厂，印制世
                界上约1/3的钞票。如果德拉鲁公司无 ​​​​...展开全文 
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="ta_L">
          <div class="w_d">
            <div class="img_to" @click="imgto">
              <el-badge :value="3" :max="99" class="item">
                <i class="el-icon-s-comment"></i>
              </el-badge>
              
            </div>
            <div class="d_ofne box"  @click="indeX" >
              <div class="topen"><img src="@/assets/img/aa.png" alt=""></div>
              <div class="tat_aa">
                <span class="ouon">Lua嘟嘟</span>
                <p class="ouon1">二级会员</p>
              </div>
            </div>
            <div class="ii_so">
              <div class="oenn_qn" @click="onDoen">
                <span>关注</span>
                <p>20</p>
              </div>
              <div class="oenn_qn">
                <span>粉丝</span>
                <p>20</p>
              </div>
              <div class="oenn_qn">
                <span>交流帖</span>
                <p>20</p>
              </div>
            </div>
          </div>
          <div class="w_l">
            <div class="too_on">
              <div>热门话题</div>
              <div>换一换</div>
            </div>
            <div class="list_q">
              <ul>
                <li v-for="(list,index) in onlistl" :key="index">
                  <div>
                    <span>#{{list.tel}}#</span>
                    <p>{{list.id}}</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import divEditor from '@/components/div-editor'
import like from '@/components/like'
export default {
  components: { 
    merchantHeader,
    Footer,
    divEditor,
    like
  },
  data() {
    return {
      name:['全部','图片','视频','','','','',''],
      onlistl:[
        {tel:'免费体验上新啦',id:'1'},
        {tel:'免费体验上新啦',id:'2'},
        {tel:'免费体验上新啦',id:'3'},
        {tel:'免费体验上新啦',id:'4'},
        {tel:'免费体验上新啦',id:'5'},
        {tel:'免费体验上新啦',id:'6'},
        {tel:'免费体验上新啦',id:'7'},
        {tel:'免费体验上新啦',id:'8'},
        {tel:'免费体验上新啦',id:'9'},
        {tel:'免费体验上新啦',id:'10'},
      ],
      isActive:0,
      placeholder: '请输入你的想法',
      userInput: '',
      dianzan:'0'
    }
      
  },
  methods: {
    checkItem(index){
      this.isActive=index;
      console.log(index)
    },
    sendMessage(val) {
      const message = this.$refs.message
      message.textContent = val
    },
    indeX() {
      this.$router.push({
          path: "/InteracIn"
        });
      },
    onDoen() {
        this.$router.push({
          path: "/InteracEa"
        });
      },
      imgto(){
        this.$router.push({
          path: "/InteracFu"
        });        
      }
    },
}
</script>
<style scoped>
#app {
  display: flex;
  justify-content: center;
}
.afafaafafaf {
  display: flex;
  justify-content: space-between;
}
.opt {
  width: 58px;
  height: 22px;
  color: #f06048;
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  line-height: 22px;
  cursor: pointer;
  position: relative;
  top: 20px;
  right: 42px;
}
.opt:hover {
  box-shadow: 0px 1px 1px rgba(0,0,0,0.15);  
}
.active {
  color: #f06048
}
.publish-box {
  width: 850px;
}
.publish-title {
  text-align: center;
}
.message {
  border: 1px solid;
  height: 400px;
  overflow: auto;
}
.demo {
  padding: 10px 0;
}
.backorg {
  background-color: #f06048;
}

.longe {
  height: 20px;
}
.box {
  display: flex;
  justify-content: space-between;
}
.con_aon {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.ta_list {
  width: 900px;
}
.ta_list .top {
  width: 900px;
	background-color: #ffffff;
}
.ta_list .top .ta {
  font-size: 16px;
  margin-left: 4px;
  padding-top: 3px;
}
.adniu {
  width: 80px;
	height: 26px;
	background-color: #f06048;
	border-radius: 4px;
  color:#fff;
  line-height: 26px;
  text-align: center;
  margin-left: 800px;
}
.ewh_qaw{
  width: 878px;
	height: 112px;
	border: solid 1px #a0a0a0;
  margin: 10px auto;
}
.ta_L {
  width: 280px;
}
.ta_L .w_d{
  width: 280px;
	height: 200px;
	background-color: #ffffff;
}

.oenn_qn {
  cursor: pointer;
}
.ta_L .w_l{
	width: 280px;
	height: 497px;
	background-color: #ffffff;
  margin-top: 20px;
}
.nva{
  width: 900px;
	height: 41px;
	background-color: #ffffff;
  margin-top: 20px;
  line-height: 40px;
  display: flex
}
.nva div img {
      position: relative;
    top: -31px;
    left: 507px;
}
.nva ul {
  display: flex
}
.nva input {
  width: 509px;
	height: 30px;
	border: solid 1px #a0a0a0;
  margin-left: 25px;
  padding-left: 10px;
}
.nva ul li {
  font-size: 18px;
  margin-left: 30px;
  cursor: pointer;
}
.conmen .list {
  width: 900px;
  background-color: #ffffff;
  margin-top: 10px;
}



.too_on {
  height: 30px;
  width: 240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(221, 221, 221);
}
.too_on div {
  font-size: 18px;
  line-height: 30px;
}

.list_q ul li div{
  display: flex;
  width: 250px;
  margin: 0 auto;
  margin-left: 10px;
  line-height: 28px;
  justify-content: space-between;

}
.img_to {
    display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  padding-right: 20px;

}
.img_to i {
    font-size: 29px;
    color: #797979;
}
.d_ofne {
  width: 140px;
  margin: 0 auto;
  cursor: pointer;
}
.d_ofne_e {
  width: 140px;
  padding-top: 10px;
  padding-left: 20px;
}
.tat_aa_e .sj {
  font-size: 14px;
  color: #a0a0a0;
  cursor: pointer;
}
.tat_aa{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  margin-top: 10px;
}
.tat_aa span{
  font-size: 18px;
  text-align: center;
}
/* .d_ofne:hover.tat_aa span {
  color: #f06048
} */
.tat_aa_e{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 35px;
  margin-top: 10px;
  line-height: 25px;
}
.tat_aa_e span{
  font-size: 18px;
  text-align: center;
}
.topen img{
  	width: 62px;
	height: 62px;
  border-radius: 50%
}
.topen_e img{
  	width: 62px;
	height: 62px;
  border-radius: 50%
}
.ii_so {
  display: flex;
  width: 260px;
  margin: 10px auto;
  text-align: center;
}
.ii_so div {
  margin-left: 40px;
}
.ii_so div span {
  color: #a0a0a0
}
.ii_so div p {
  font-size: 18px;
  color: black
}
.ado_oo{
  width: 746px;
	padding-bottom: 34px;
  margin: 0 auto;
}
.ado_oo p {
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
  line-height: 30px;
}
.ado_oo span {
  color:#f06048;
}
.is_ing {
  height: 320px;
  width: 630px;
  margin: 0 auto;

}
.is_ing  img {
  width: 150px;
  height: 150px;
}
.oenn_qn p:hover {
  color: #f06048;
}
</style>